<template>
  <div>
    <el-collapse v-model="active">
      <el-collapse-item v-for="(chapter,index) in catalogue" :key="index"  :name="chapter.chapterId">
        <template #title>   <!-- slot="title" -->
                <p class="chapter">{{ chapter.title }}</p>
        </template>
        <div 
        class="section-item" flex="main:left cross:center" 
        style="display:flex; justify-content:flex-start; align-items:center;"
        v-for="(section,sectionIndex) in chapter.lessonInfo" 
        :key="sectionIndex"
        >
            <p class="iconfont icon icon-bofang" @click="lessonChange(section.lessonId)"></p>
            <div 
            flex="dir:top main:justify"
            style="display:flex; flex-direction:column; justify-content: space-between;"
            >
              <p>{{ section.title }}</p>
              <p>00:00:00</p>
            </div>
        </div>
      </el-collapse-item>
    </el-collapse>
  </div>
</template>

<script lang="ts">
    export default {
        props:{
          catalogue:Array,
          activeChapter:String
        },
        data(){
          return {
            active:''
          }
        },
        mounted(){
          this.active = this.activeChapter
       
        },
        methods:{
          lessonChange(lessonId){
            this.$emit('lessonChange',lessonId)
          }
        },
        watch: {
          active(val){
            this.$emit('changeActive',val)
          },
          activeChapter(val){
            this.active = val
          }
        }
    }
</script>

<style lang="scss"  scoped>
.section-item{
  padding: 20px;
  border-radius: 10px;
  background-color: #ffeee4;
   color: #807771;
   margin-bottom: 20px;
}
.icon{
  display:inline-block;
  font-size:40px;
  height:40px;
  width:40px;
  margin-right:20px;
  cursor: pointer;
}
.chapter{
  font-size:16px
}
.icon-bofang:before {
    content: "\e624";
    top: -15px;
    position: relative;
}

</style>